<template>
  <view>
    <view class="nav_list">
       <view class="navbar1">
			<view class="iconfont icon-xiangzuo" @tap='returns'></view>
			<text>我要发团</text>
		</view>
    <view style="height:100rpx"></view>
      <view class="header">
        <view class="serch-wrapper flex">
          <!-- <view class="logo"> -->
          <!-- <image v-if="!logoUrl" class="logo" src="/static/images/crmeb.png"></image> -->
          <!-- <image :src="logoUrl" mode=""></image>
				</view> -->
          <navigator url="/pages/goods_search/index"
                     class="input"
                     hover-class="none"><text class="iconfont icon-xiazai5"></text>
            搜索商品</navigator>
        </view>
      </view>
      <view class="nav_list_item">
        <image src="../../../static/images/rank4.png"
               :class="hover4"
               @click="changeType(4)"></image>
      </view>
      <view class="nav_list_item">
        <image src="../../../static/images/rank5.png"
               :class="hover5"
               @click="changeType(5)"></image>
      </view>
      <view class="nav_list_item">
        <image src="../../../static/images/rank6.png"
               :class="hover6"
               @click="changeType(6)"></image>
      </view>
      <view class="nav_list_item">
        <image src="../../../static/images/rank7.png"
               :class="hover7"
               @click="changeType(7)"></image>
      </view>
    </view>
    <v-tabs v-model="current"
            :tabs="tabs"
            @change="changeTab"></v-tabs>
    <promotionGood :benefit="benefit"></promotionGood>
  </view>
</template>

<script>
import Vtabs from '@/components/v-tabs/v-tabs.vue'
import { getCategory, getProduct } from '@/api/api.js'
import promotionGood from '@/components/promotionGood/index3.vue'
export default {
  data() {
    return {
      hover4: 'hover',
      hover5: '',
      hover6: '',
      hover7: '',
      select_type: 4,
      current: 0,
      tabs: [],
      category_list: [],
      tab_map: {},
      select_cate_id: 0,
      benefit: [],
    }
  },
  created() {
    getCategory().then((res) => {
      console.log(res)
      let data = res.data
      this.category_list = data
      let arr = []
      let tab_map = {}
      for (let i = 0; i < data.length; i++) {
        arr[i] = data[i].cate_name
        tab_map[data[i].cate_name] = data[i].id
      }
      console.log(tab_map)
      arr.unshift('全部')
      this.tabs = arr
      this.tab_map = tab_map
      this.getProducts()
    })
  },
  onLoad() {
    let cate_id = uni.getStorageSync('select_cate_id') || 0
    uni.setStorageSync('select_cate_id', 0)
    let that = this
    setTimeout(function () {
      that.current = cate_id
      that.changeTab(cate_id)
    }, 1000)
  },
  onShow() {
    let cate_id = uni.getStorageSync('select_cate_id') || 0
    uni.setStorageSync('select_cate_id', 0)
    let that = this
    setTimeout(function () {
      that.current = cate_id
      that.changeTab(cate_id)
    }, 1000)
  },
  methods: {
    changeType(type) {
      if (type == 4) {
        this.hover4 = 'hover'
        this.hover5 = ''
        this.hover6 = ''
        this.hover7 = ''
      } else if (type == 5) {
        this.hover4 = ''
        this.hover5 = 'hover'
        this.hover6 = ''
        this.hover7 = ''
      } else if (type == 6) {
        this.hover4 = ''
        this.hover5 = ''
        this.hover6 = 'hover'
        this.hover7 = ''
      } else if (type == 7) {
        this.hover4 = ''
        this.hover5 = ''
        this.hover6 = ''
        this.hover7 = 'hover'
      }
      this.select_type = type
      this.getProducts()
    },
    changeTab: function (category) {
      console.log(category)
      let tabs = this.tabs
      let cate_name = tabs[category]
      console.log(cate_name)
      let tab_map = this.tab_map
      console.log(tab_map)
      let id = tab_map[cate_name]
      id = id == id ? id : 0
      this.select_cate_id = id
      this.getProducts()
    },
    getProducts: function () {
      let select_cate_id = this.select_cate_id
      let pink_type = this.select_type
      let params = {
        cate_id: select_cate_id,
        pink_type: pink_type,
      }
      getProduct(params).then((res) => {
        console.log(res)
        this.benefit = res.data
      })
    },
    returns() {
      uni.navigateBack();
    }
  },
  components: {
    Vtabs,
    promotionGood,
  },
}
</script>

<style lang="scss">

.header {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);
  .serch-wrapper {
    align-items: center;
    padding: 20rpx 50rpx 20rpx 53rpx;

    .logo {
      width: 118rpx;
      height: 42rpx;
      margin-right: 30rpx;
    }

    image {
      width: 118rpx;
      height: 42rpx;
    }

    .input {
      display: flex;
      align-items: center;
      width: 100%;
      height: 58rpx;
      padding: 0 0 0 30rpx;
      background: rgba(247, 247, 247, 1);
      border: 1px solid rgba(241, 241, 241, 1);
      border-radius: 29rpx;
      color: #bbbbbb;
      font-size: 28rpx;

      .iconfont {
        margin-right: 20rpx;
      }
    }
  }
}

.nav_list_item {
  width: 25%;
  float: left;
  text-align: center;
  margin-top: 10rpx;
}
.nav_list_item image {
  width: 160rpx;
  height: 146rpx;
  /* border-radius: 20rpx 100rpx 100rpx; */
}
.nav_list_item image.hover {
  border: 4rpx solid yellow;
  border-radius: 10rpx;
}
</style>
